<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2>米梵后台管理系统</h2>
      <div class="login-content">
        <div class="login-left">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="密码登录" name="password">
              <el-form
                :model="passwordForm"
                :rules="passwordRules"
                ref="passwordFormRef"
              > 
                <el-form-item prop="adminName">
                  <el-input
                    v-model="passwordForm.adminName"
                    placeholder="管理员名"
                  >
                    <template #prefix>
                      <el-icon><User /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="passwordForm.password"
                    type="password"
                    placeholder="密码"
                    show-password
                  >
                    <template #prefix>
                      <el-icon><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="passwordForm.remember"
                    >记住我</el-checkbox
                  >
                  <el-link type="primary" class="forget-password"
                    >忘记密码？</el-link
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="handlePasswordLogin"
                    :loading="loading"
                    class="login-button"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="短信登录" name="sms">
              <el-form :model="smsForm" :rules="smsRules" ref="smsFormRef">
                <el-form-item prop="phone">
                  <el-input v-model="smsForm.phone" placeholder="手机号">
                    <template #prefix>
                      <el-icon><Iphone /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input v-model="smsForm.code" placeholder="验证码">
                    <template #append>
                      <el-button
                        @click="handleSendSmsCode"
                        :disabled="smsCodeSent"
                      >
                        {{
                          smsCodeSent ? `${countdown}s后重新发送` : "发送验证码"
                        }}
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="handleSmsLogin"
                    :loading="loading"
                    class="login-button"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
          <!-- 将微信登录和注册选项移到标签页外部 -->
          <div class="login-options">
            <el-link
              type="primary"
              class="wechat-login"
              @click="handleWechatLogin"
            >
              <el-icon><ChatDotRound /></el-icon>
              微信登录
            </el-link>
            <el-link
              type="primary"
              class="register-link"
              @click="handleRegister"
              >注册</el-link
            >
          </div>
        </div>
        <div class="login-right">
          <div class="qr-code">
            <h3>扫码登录</h3>
            <!-- 暂时使用占位图 -->
            <img
              src="https://via.placeholder.com/200x200.png?text=Scan+QR+Code"
              alt="QR Code"
            />
            <p>请使用手机扫描二维码登录</p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

import { ElMessage } from "element-plus";
import { User, Lock, Iphone, ChatDotRound } from "@element-plus/icons-vue";
//import { login, sendSmsCode, smsLogin } from "@/api/login";
import { useLoginStore } from "@/stores/useLoginStore"; // 导入 loginStore


const loginStore = useLoginStore(); // 使用 loginStore
const loading = ref(false);
const activeTab = ref("password");

const passwordFormRef = ref(null);
const smsFormRef = ref(null);

const passwordForm = reactive({
  adminName: "",
  password: "",
  remember: false,
});

const smsForm = reactive({
  phone: "",
  code: "",
});

const passwordRules = {
  adminName: [{ required: true, message: "请输入管理员名", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度至少为6个字符", trigger: "blur" },
  ],
};

const smsRules = {
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入有效的手机号",
      trigger: "blur",
    },
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { len: 6, message: "验证码长度应为6位", trigger: "blur" },
  ],
};

const smsCodeSent = ref(false);
const countdown = ref(60);

const handlePasswordLogin = async () => {
  if (!passwordFormRef.value) return;
  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      try {
        loginStore.asyncLogin({
          adminName: passwordForm.adminName,
          password: passwordForm.password,
        });
      } catch (error) {
        ElMessage.error(error.response?.data?.message || "登录失败，请检查用户名和密码");
      } finally {
        loading.value = false;
      }
    }
  });
};

const handleSmsLogin = async () => {
  if (!smsFormRef.value) return;
  await smsFormRef.value.validate(async (valid) => {
    if (valid) {
    }
      
  });
};

const handleSendSmsCode = async () => {
  try {
    await sendSmsCode(smsForm.phone);
    smsCodeSent.value = true;
    ElMessage.success("验证码已发送");
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value === 0) {
        clearInterval(timer);
        smsCodeSent.value = false;
        countdown.value = 60;
      }
    }, 1000);
  } catch (error) {
    ElMessage.error(error.message || "发送验证码失败");
  }
};

const handleWechatLogin = () => {
  // 实现微信登录逻辑
  console.log("微信登录");
};

const handleRegister = () => {
  // 实现注册逻辑，可能是跳转到注册页面
  console.log("跳转到注册页面");
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to right, #3494e6, #ec6ead);
}

.login-card {
  width: 800px;
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #409eff;
}

.login-content {
  display: flex;
  justify-content: space-between;
}

.login-left {
  width: 50%;
  padding-right: 20px;
}

.login-right {
  width: 50%;
  padding-left: 20px;
  border-left: 1px solid #e0e0e0;
}

.login-button {
  width: 100%;
}

.forget-password {
  float: right;
}

.qr-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.qr-code img {
  width: 200px;
  height: 200px;
  margin: 20px 0;
}

.wechat-login {
  margin-top: 20px;
  text-align: center;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.wechat-login {
  display: flex;
  align-items: center;
}

.wechat-login .el-icon {
  margin-right: 5px;
}

.register-link {
  margin-left: auto;
}

@media (max-width: 768px) {
  .login-card {
    width: 90%;
  }

  .login-content {
    flex-direction: column;
  }

  .login-left,
  .login-right {
    width: 100%;
    padding: 0;
  }

  .login-right {
    margin-top: 20px;
    border-left: none;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
  }
}
</style>
